<{extend name="base" /}>
    <{block name="body" }>
        <style>html{font-size: 100px}</style>
        <div class="layui-body ">
            <div class="layui-tab layui-tab-brief">
                <ul class="layui-tab-title">
                    <li class=""><a href="<{:url('admin/baidu/index')}>">已添加列表</a></li>
                    <li class="layui-this"><a href="<{:url('admin/baidu/create',['style_id'=>1])}>">样式一</a></li>
                    <li class=""><a href="<{:url('admin/baidu/create',['style_id'=>2])}>">样式二</a></li>
                    <li class=""><a href="<{:url('admin/baidu/create',['style_id'=>3])}>">样式三</a></li>
                    <li class=""><a href="<{:url('admin/baidu/create',['style_id'=>4])}>">样式四</a></li>
                    <li class=""><a href="<{:url('admin/baidu/create',['style_id'=>5])}>">样式五</a></li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show" id="app">
                        <div class="left">
                            <form class="layui-form" method="post" action="<{:url('admin/baidu/save')}>">
                                <input type="hidden" name="style" value="1">
                                <{php}>
                                if(request()->action() == 'edit'){
                                    echo '<input type="hidden" name="type" value="edit">';
                                    echo '<input type="hidden" name="id" value="'.request()->get('id').'">';
                                }
                                <{/php}>

                                <div class="layui-form-item" v-for="(thumb,index) in banner">
                                    <label class="layui-form-label">轮播图</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="content[banner][]" v-model="banner[index]" lay-verify="required"  class="layui-input layui-input-inline" >
                                        <input type="file" name="file" :data-id="index" data-type='banner' class="layui-upload-file">
                                        <button type="button" v-if="index == CbannerCount" @click="addBanner" class="layui-btn" >添加一张轮播图</button>
                                    </div>
                                </div>

                                <div class="group-item" v-for="(item,index) in groupItem">
                                    <div class="layui-form-item layui-form-text">
                                        <label class="layui-form-label">描述</label>
                                        <div class="layui-input-block">
                                            <textarea :name="'content[groupItem]['+index+'][desc]'" lay-verify="required"  class="layui-textarea" v-model='groupItem[index].desc'></textarea>
                                        </div>
                                    </div>
                                    <div class="layui-form-item" >
                                        <label class="layui-form-label">小图标</label>
                                        <div class="layui-input-block">
                                            <input type="text" :name="'content[groupItem]['+index+'][thumb]'" v-model='groupItem[index].thumb' lay-verify="required"   class="layui-input layui-input-inline" >
                                            <input type="file" name="file" :data-id="index" data-type='ico' class="layui-upload-file">
                                            <button type="button" v-if="index == CgroupItem"  @click="addGroupItem" class="layui-btn" >添加一组描述</button>
                                        </div>
                                    </div>
                                </div>


                                <div class="layui-form-item">
                                    <label class="layui-form-label">电话</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="content[tel]" v-model='tel' lay-verify="required" placeholder="例如：010-8888888" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label">链接</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="content[url]" v-model='url' lay-verify="required|url" placeholder="例如：http://m.baidu.com" class="layui-input">
                                    </div>
                                </div>


                                <div class="layui-row" v-for="(item,index) in bottomItem">
                                    <div class="layui-col-md4">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">小标题</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="content[bottomItem][][title]" v-model='bottomItem[index].title' required lay-verify="required" placeholder="特色服务" class="layui-input layui-input-inline">
                                                <button type="button" v-if="index == CbottomItem" @CLICK="addBottomItem" class="layui-btn">添加一个小标题</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>



                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="right" id="baidu-search">
                            <link rel="stylesheet" href="/baidu/css/style.css" />
                            <script src="__JS__/swiper-4.1.6.min.js"></script>
                            <div class="ec_wise_ad ">
                                <div class="ec_brandAd">
                                        <div class="c-container ec-material_list">
                                            <div class="c-gap-top-small ec-block-material_list-5">
                                                <div class="ec-head">
                                                    <div class="c-gap-top-small ec-block-head-abs">
                                                        <div class="swiper-container">
                                                            <div class="swiper-wrapper">
                                                                <div class="swiper-slide" v-for="thumb in banner"><img :src="thumb" alt=""></div>
                                                            </div>
                                                            <div class="swiper-pagination"></div>
                                                            <div class="swiper-scrollbar"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="c-gap-top-small ec-block-material_list-0">
                                                <div class="ec-head">
                                                    <div class="c-gap-top-small ec-block-head-abs">
                                                        <div class="ec-abstract">
                                                            <a href="" v-for="item in groupItem">
                                                                <div class="c-row ec-abstract-row">
                                                                    <div class="c-span2 ec-abstract-img-button">
                                                                        <div class="c-img c-img-s ec-abstract-img">
                                                                            <img :src="item.thumb">
                                                                        </div>
                                                                    </div>
                                                                    <div class="c-span10 ec-abstract-text-button">
                                                                        <div class="c-abstract c-line-clamp2 ec-abstract-text" v-html="item.desc"></div>
                                                                    </div>
                                                                </div>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="c-gap-top-small ec-block-material_list-2">
                                                <div class="ec-strong_link_group">
                                                    <div class="c-gap-top-small c-gap-bottom-small">
                                                        <div class="c-slink c-slink-strong ec-strong_link_group-wrapper">
                                                            <a class="ec-strong_link_group-item" href="" v-for="item in bottomItem">{{item.title}}</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="ec-pl-no-gap-top ec-block-material_list-3" style="margin-top: -.11rem; ">
                                                <div class="ec-single_tel">
                                                    <a class="c-flexbox c-gap-top-small c-gap-bottom-small c-line-top c-line-bottom c-color" :href="Ctel" title2="拨打电话">
                                                        <span class="ec-single_tel-name">客服热线</span>
                                                        <span class="c-gap-left ec-single_tel-tel" v-html="tel"></span>
                                                        <img class="c-icon ec-single_tel-icon" style=" width: .14rem; height: .14rem; margin-top: 0.1rem;" src=""
                                                        />
                                                    </a>
                                                </div>
                                            </div>
                                            <div class="c-gap-top-small ec-block-material_list-4">
                                                <div class="ec-brand_tip">
                                                    <div class="c-flexbox ec-brand_tip-tip">
                                                        <span class="ec-brand_tip-text">品牌广告</span>
                                                    </div>
                                                    <div class="ec-brand_tip-content"></div>
                                                </div>
                                            </div>
                                        </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
<{/block}>
<{block name="script" }>
                <style type="text/css">
                    .left,
                    .right {
                        float: left;
                    }

                    .left {
                        width: 60%;
                    }

                    .right {
                        height: 550px;
                        margin-left: 60px;
                        width: 300px;
                        border: 2px solid #ccc;
                        border-radius: 20px;
                        padding: 20px;
                        background: #f1f1f1;
                        box-shadow: 1px 2px #eeeeee5c;
                    }
                    .group-item{
                        background: #f7f7f7;
                        padding: 10px 10px 10px 0;
                        border-radius: 5px;
                        margin: 10px 0;
                    }
                </style>
                <script src="/static/js/vue.js"></script>
                <script type="text/javascript">
                    var vue = new Vue({
                        el: "#app",
                        data: {
                            tel: '010-8888888',
                            url:'',
                            banner:[
                                'http://iph.href.lu/365x210',
                                'http://iph.href.lu/365x210',
                            ],
                            groupItem:[
                                {
                                    thumb:'http://iph.href.lu/80x80',
                                    desc:'即刻加入"猎青行动"，3月-6月置换或重购指定奔驰车型，可享惊喜礼遇。'
                                }
                            ],
                            bottomItem:[
                                {
                                    title:'特色服务',
                                },
                                {
                                    title:'特色服务',
                                }
                            ],
                            mySwiper:null,
                        },
                        computed: {
                            CbannerCount: function () {
                                return this.banner.length - 1;
                            },
                            CgroupItem:function(){
                                return this.groupItem.length - 1;
                            },
                            CbottomItem:function(){
                                return this.bottomItem.length - 1;
                            },
                            Ctel: function () {
                                return 'tel:' + this.tel;
                            }

                        },
                        methods:{
                            addBanner:function(){
                                if (this.banner.length >= 5 ) {
                                    layer.msg('最多添加五张轮播图');
                                    return;
                                }
                                this.banner.push('http://iph.href.lu/365x210');
                            },
                            addGroupItem:function(){
                                if (this.groupItem.length >= 3 ) {
                                    layer.msg('最多添加三组');
                                    return;
                                }
                                this.groupItem.push({
                                    thumb:'http://iph.href.lu/80x80',
                                    desc:'即刻加入"猎青行动"，3月-6月置换或重购指定奔驰车型，可享惊喜礼遇。'
                                });
                            },
                            addBottomItem:function(){
                                if (this.bottomItem.length >= 3 ) {
                                    layer.msg('最多添加三组');
                                    return;
                                }
                                this.bottomItem.push({
                                    title:'特色服务',
                                });
                            },
                            uploadMethod:function(){
                                   layui.upload({
                                        url: "/api/upload/upload",
                                        type: 'image',
                                        ext: 'jpg|png|gif|bmp',
                                        success: function (data,input) {
                                            console.log(input);
                                            if (data.error === 0) {
                                                var type = $(input).attr('data-type');
                                                var id = $(input).attr('data-id');
                                                if (type == 'banner') {
                                                    $("input[name='content[banner][]']:eq("+id+")").val(data.url);
                                                    if (vue.banner[id]) {
                                                        Vue.set(vue.banner, id, data.url);
                                                    }else{
                                                        vue.banner.push(data.url); //映射到vue
                                                    }
                                                }else if (type == 'ico') {
                                                    Vue.set(vue.groupItem[id],'thumb', data.url);
                                                }
                                            } else {
                                                layer.msg(data.message);
                                            }
                                        }
                                    });
                            }
                        },
                        updated:function(){
                            this.mySwiper.destroy(); //销毁上一次创建的swiper
                            this.mySwiper = null;
                            this.mySwiper = new Swiper ('.swiper-container', {
                                    loop: true,
                                    autoHeight:true, 
                                    autoplay:true,
                                    // 如果需要分页器
                                    pagination: {
                                        el: '.swiper-pagination',
                                    },                           
                                    // 如果需要滚动条
                                    scrollbar: {
                                        el: '.swiper-scrollbar',
                                    }
                            });  
                            
                            //上传文件方法
                            this.uploadMethod();                          
                        },
                        mounted: function () {
                            this.mySwiper = new Swiper ('.swiper-container', {
                                    loop: true,
                                    autoHeight:true, 
                                    autoplay:true,
                                    // 如果需要分页器
                                    pagination: {
                                        el: '.swiper-pagination',
                                    },                           
                                    // 如果需要滚动条
                                    scrollbar: {
                                        el: '.swiper-scrollbar',
                                    }
                            });

                            //上传文件方法
                            this.uploadMethod();
                        }
                    });

                    <{php}>
                        if(request()->action() == 'edit'){

                            echo "vue.tel = '".$data['content']['tel']."';";
                            echo "vue.url = '".$data['content']['url']."';";

                            echo "vue.banner = ".to_js_array($data['content']['banner']).";";
                            
                            echo "vue.bottomItem = ".to_js_array_obj_baidu($data['content']['bottomItem']).";";
                            echo "vue.groupItem = ".to_js_array_obj_baidu($data['content']['groupItem']).";";
                        }
                    <{/php}>


                </script>
                <{/block}>